<template>
  <div
    class="home bg-white w-screen h-screen overflow-y-auto pb-6"
    ref="homeRef"
  >
    <home-nav-bar-vue></home-nav-bar-vue>
    <div class="w-screen">
      <img src="@/assets/img/common/banner.jfif" alt="" class="w-full" />
    </div>
    <home-search-vue
      :host-suggest="hostData"
      :host-category="hostCategory"
    ></home-search-vue>
    <home-house-vue></home-house-vue>
    <div class="fixed right-2 bottom-16" v-show="showScrollTopBtn"
      @click="scrolltoTop(homeRef)"
    >
      <scroll-top-vue></scroll-top-vue>
    </div>
  </div>
</template>
<script setup>
import { onMounted, ref } from 'vue'
import homeNavBarVue from './components/home-nav-bar.vue'
import homeSearchVue from './components/home-search.vue'
import homeHouseVue from './components/home-house.vue'
import scrollTopVue from '@/components/scroll-top/index.vue'
import { getHostSuggest, getHostCategories } from '@/services/modules/home'
import useHomeStore from '@/stores/modules/home'
import {
  listenScrollToBottom,
  isShowScrollTopButton,
  showScrollTopBtn,
  scrolltoTop
} from '@/hooks/useScroll.js'
import { storeToRefs } from 'pinia'
const hostData = ref([])
const hostCategory = ref([])
const homeRef = ref(null)
const homeStore = useHomeStore()
const { isHashHouseList } = storeToRefs(homeStore)
const getHostSuggestData = async () => {
  const res = await getHostSuggest()
  hostData.value = res?.data
}
const getHostCategoriesData = async () => {
  const res = await getHostCategories()
  hostCategory.value = res.data
}
onMounted(() => {
  getHostSuggestData()
  getHostCategoriesData()
  //获取热门精选
  homeStore.fetchHoseList()
  listenScrollToBottom(homeRef, () => {
    if (isHashHouseList.value) {
      homeStore.fetchHoseList()
    }
  })
  isShowScrollTopButton(homeRef)
})
</script>
<style lang="less" scoped></style>
